<template>
	<div :class="{ grew: isActive }">
		<div class="item" v-if="v.type.urls">
			<h3>{{ v.title }}</h3>
			<div class="urls">
				<img v-for="(item, index) in v.type.urls" :key="index" v-my-lazy="item" alt="">
			</div>
			<p><small>{{ v.count }}人阅读</small></p>
		</div>
		<div class="item" v-else-if="v.type.bigImg">
			<h3>{{ v.title }}</h3>
			<img class="bigImg" v-my-lazy="v.type.bigImg" alt="">

		</div>
		<div class="item" v-else-if="v.type.rightImg">
			<div class="between">
				<h3>{{ v.title }}</h3>
				<img v-my-lazy="v.type.rightImg" alt="">
			</div>
			<p><small>{{ v.count }}人阅读</small></p>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

defineProps(['v', 'isActive'])
</script>

<style lang="scss" scoped>
.grew {
	color: #ccc;
}
.item {
	border-bottom: 1px solid #ccc;
	padding: 10px;

	.urls {
		img {
			width: 33%;
			padding: 4px;
		}
	}

	.bigImg {
		width: 100%;
	}

	.between {
		display: flex;
		justify-content: space-between;

		img {
			width: 40%;
		}

		h3 {
			flex: 1;
		}
	}
}
</style>